<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" :title="title" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="true"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[0]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                class="goods_box"
                @click="routeTo(item)"
                v-for="(item, index) in itemList[0]"
                :key="index"
              >
                <image :src="item.picUrl" mode=""></image>
                <view style="padding: 15rpx">
                  <view style="display: flex">
                    <view style="flex: 1; color: #ff0000">
                      <text class="price_tip">¥</text>
                      <text class="price_main">{{ (item.price * 0.01).toFixed(2) }}</text>
                    </view>
                    <!-- <view class="sales-volume1">

										</view> -->
                    <view style="margin-top: 6rpx"> 销量：{{ item.salesCount }} </view>
                  </view>
                  <view class="" style="color: #999999">
                    品牌：{{ item.introduction || '其他品牌' }}
                  </view>
                  <view class="" style="display: flex">
                    <view class="goods_title" style="flex: 1">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem" v-for="(sw, index2) in tabsList2" :key="index2">
          <z-paging
            ref="pagingz"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                class="goods_box"
                @click="routeTo(item)"
                v-for="(item, index) in itemList[index2]"
                :key="index"
              >
                <image :src="item.picUrl" mode=""></image>
                <view style="padding: 15rpx">
                  <view class="goods_title">
                    {{ item.name }}
                  </view>
                  <!-- <view class="goods_tip">
										满10减1
									</view> -->
                  <view class="goods_price">
                    <view class="price-item">
                      <text class="price_tip">¥</text>
                      <text class="price_main">{{ (item.price * 0.01).toFixed(2) }}</text>
                    </view>
                    <view class="sales-volume" style="font-size: 26rpx">
                      销量： {{ item.salesCount }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '全部'
        }
      ],
      itemList: [[]],
      tabsList2: [],
      order_id: '',
      categoryId: '',
      initCateId: ''
    }
  },
  onLoad(res2) {
    this.title = res2.name
    this.initCateId = res2.categoryId
    let self = this
    this.categoryId = res2.categoryId
    this.$u.get('/app-api/product/category/list', { parentId: this.initCateId }).then((res) => {
      res.data.forEach((item) => {
        if (item.parentId == res2.categoryId) {
          this.tabsList.push(item)
          this.itemList.push([])
          this.tabsList2.push(item)
        }
      })
      this.$nextTick(() => {
        this.queryList(1, 10)
      })
    })
    //this.queryList(1, 10, this.categoryId)
  },
  onShow() {},
  methods: {
    tabsChange(index) {
      this.scurrent = index
      //this.init()
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      // if(this.tabsList2[this.current - 1].length == 0){
      // }
      this.queryList()
    },

    queryList(pageNo = 1, pageSize = 10) {
      this.categoryId = this.current > 0 ? this.tabsList2[this.current - 1].id : this.initCateId
      this.$u.api.getGoodsPage({ pageNo, pageSize, categoryId: this.categoryId }).then((res) => {
        //this.itemList[this.current] = res.data.list
        if (this.current == 0) {
          this.$refs.paging.complete(res.data.list)
        } else {
          this.$refs.pagingz[this.current - 1].complete(res.data.list)
        }
      })
    },

    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },
    routeTo(item) {
      uni.navigateTo({
        url:
          '/goods/goods-details/goods-details?goodsId=' +
          item.id +
          '&shop=' +
          JSON.stringify(item.shop)
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.goods_area {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background: #f0f1f2;
}
.goods_box {
  width: 350rpx;
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  background-color: #ffffff;
  margin-left: 15rpx;
  margin-bottom: 20rpx;
}
.goods_box image {
  width: 350rpx;
  height: 350rpx;
}
.goods_title {
  font-size: 35rpx;
}
.goods_price {
  font-size: 25rpx;
  overflow: auto;
  margin: 10rpx 0 25rpx 0;
}
.price-item {
  float: left;
  color: red;
}

.sales-volume {
  float: right;
  font-size: 35rpx;
  color: #999999;
}
.price_tip {
  font-size: 35rpx;
  color: red;
}
.price_main {
  font-size: 40rpx;
}
.price_dot {
  font-size: 30rpx;
  align-self: flex-end;
}
.goods_tip {
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  background-color: #f5e8e6;
  padding: 5rpx 10rpx;
  margin: 20rpx 0;
}
.goods_old_price {
  color: #89898a;
  text-decoration: line-through;
}
</style>
